<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML Template Example</title>
</head>
<body>
<!-- 定义模板 -->
<template id="my-template">
    <article>
        <h2>Template Title</h2>
        <p>Template Content</p>
        <button>Click Me</button>
    </article>
</template>

<!-- 插入模板的地方 -->
<div id="container"></div>

<script>
    // 获取模板
    const template = document.getElementById('my-template');

    // 克隆模板内容
    const clone = template.content.cloneNode(true);

    // 插入克隆的内容到页面中
    document.getElementById('container').appendChild(clone);

    // 为按钮添加事件监听器
    const button = clone.querySelector('button');
    button.addEventListener('click', () => {
        alert('Button clicked!');
    });
</script>
</body>
</html>